<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>选择用户</title>
    <style>
        .mui-input-row .input-icon {
            width: 50%;
            float: left;
        }

        .mui-input-row a {
            margin-right: 10px;
            float: right;
            text-align: left;
            line-height: 1.5;
        }

        .div_opinion {
            text-align: left;
        }

        .opinionContent {
            margin: 10px;
            width: 65%;
            float: right;
            font-weight: normal;
        }

        .opinionContent div {
            text-align: right;
        }

        .opinionContent div span {
            padding: 10px;
        }

        .opinionContent .content_h5 {
            color: #000;
            font-size: 17px;
        }

        .mui-media-body {
            font-size: 12px;
        }
    </style>
    <link rel="stylesheet" href="../../weixin/css/mui.indexedlist.css"/>
    <link rel="stylesheet" href="../../weixin/css/at_flow.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">
        选择用户
    </h1>
    <a id='done'
       class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
</header>
<div class="mui-content">
    <div id='list' class="mui-indexed-list">
        <div class="mui-indexed-list-search mui-input-row mui-search">
            <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索姓名"/>
        </div>
        <div class="mui-indexed-list-bar">
            <a>A</a>
            <a>B</a>
            <a>C</a>
            <a>D</a>
            <a>E</a>
            <a>F</a>
            <a>G</a>
            <a>H</a>
            <a>I</a>
            <a>J</a>
            <a>K</a>
            <a>L</a>
            <a>M</a>
            <a>N</a>
            <a>O</a>
            <a>P</a>
            <a>Q</a>
            <a>R</a>
            <a>S</a>
            <a>T</a>
            <a>U</a>
            <a>V</a>
            <a>W</a>
            <a>X</a>
            <a>Y</a>
            <a>Z</a>
        </div>
        <div class="mui-indexed-list-alert"></div>
        <div class="mui-indexed-list-inner">
            <div class="mui-indexed-list-empty-alert">
                没有数据
            </div>
            <ul class="mui-table-view">
            </ul>
        </div>
    </div>
</div>
<script src="../../weixin/js/mui.user.wx.js"></script>
<script src="../../weixin/js/macro/open_window_macro.js"></script>
<script src="../../weixin/js/mui.user.indexedlist.js"></script>
<script th:inline="javascript">
    $(function () {
        // 即便延时，list.style.height的计算也不准确
        setTimeout(function () {
            var list = document.getElementById('list');
            var header = document.querySelector('header.mui-bar');
            // list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
            // console.log('list.style.height', list.style.height);
            // 计算不准确，故写成固定值
            list.style.height = '460px';
            var op = {
                "chooseUsers": [[${chooseUsers}]],
                "internalName": [[${internalName}]],
                "isAt": [[${isAt}]],
                "code": [[${code}]],
                "isMulti": "[[${isMulti}]]",
                "isFree": [[${isFree}]],
                "isCondition": [[${isCondition}]],
                "workflowActionIdStr": [[${workflowActionIdStr}]],
                "isPlus": [[${isPlus}]],
                "plusType": [[${plusType}]],
                "plusMode": [[${plusMode}]],
                "myActionId": [[${myActionId}]],
                "op": [[${op}]]
            };
            window.user = new mui.User(list, op);
            window.user.chooseUserInit();
        }, 200);
    })
</script>
</body>
</html>